<script setup lang="ts">
import { Button, Card, Popover, Space, Table, TableColumn } from '@idmy/ui'
import { IconPlus } from '@idmy/ui-icon'
import { Api, Data } from '@idmy/core'
import { allProjects, deleteProject } from './services'
import ProjectCreate from '@/components/sys/Project/create/index.vue'

defineOptions({ name: 'ProjectAll' })
const apiRef = ref()
const load = () => apiRef.value.onLoad()

const onCreate = (model?: Data) => {
  Modal.open({
    component: ProjectCreate,
    title: model.id ? '更新项目' : '创建项目',
    enableLock: true,
    width: 2,
    props: {
      model,
    },
    onClose: isOk => isOk && load(),
  })
}
const onDelete = useDelete(deleteProject, load)
</script>
<template>
  <Card>
    <Api ref="apiRef" :load="allProjects" type="Array">
      <Space direction="vertical">
        <Space>
          <Button shape="circle" type="primary" @click="onCreate">
            <IconPlus />
          </Button>
        </Space>
        <Table>
          <TableColumn title="名称" field="name">
            <template #cell="{ row }">
              <Popover position="right">
                <Button isText :text="row.name" />
                <template #content>
                  <Space>
                    <Button @click="onCreate(row)">编辑</Button>
                    <Button @click="onDelete(row.id)">删除</Button>
                  </Space>
                </template>
              </Popover>
            </template>
          </TableColumn>
          <TableColumn title="Key" field="key" />
          <TableColumn title="备注" field="remark" />
          <TableColumn title="创建人" field="creator" />
          <TableColumn title="创建日期" field="createdAt" type="Datetime" />
          <TableColumn title="更新日期" field="updatedAt" type="Datetime" />
        </Table>
      </Space>
    </Api>
  </Card>
</template>
